<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="utf-8">
	<title>卷类管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../layui/css/layui.css" media="all">
	<style>
		.volumeClassMan-con .layui-table-view {
			border: none;
		}
		
		.volumeClassMan-con .layui-table-box {
			margin-top: 10px;
		}
		
		.volumeClassMan-con {
			padding: 10px 15px 15px 15px;
			margin-bottom:50px;
		}
		.volumeClassMan-con  .layui-table-tool-self{
			display:none;
		}
		.volumeClassMan-con .not_border_left {
			border-left: none !important;
		}
		
		.volumeClassMan-con .VoluemeClassList dl dd.layui-this {
			background-color: #1E9FFF !important;
		}
		
		.volumeClassMan-con .hide {
			display: none;
		}
		
		.volumeClassMan-con .show {
			display: block;
		}
		
		.volumeClassMan-con .btn_size {
			height: 28px !important;
			line-height: 28px !important;
		}
		
		.volumeClassMan-con .layui-table-body table tbody .layui-table-hover {
			background: #fffdd3 !important;
		}
		
		.volumeClassMan-con .layui-table-body table tbody .layui-table-click {
			background: #fdef9b !important;
		}
		
		.volumeClassMan-con .layui-table, .layui-table-view {
			border: none;
			margin-top: 0;
		}
		
		#addVolClass-layer {
			display: none;
			overflow: hidden;
			z-index: 999 !important;
		}
		
		#addVolClass-layer .addVolClassLayer {
			width: 90%;
			margin-left: auto;
			margin-right: auto;
			padding-top: 20px;
		}
		/* 下拉框最大高度 */
		#addVolClass-layer .addVolClassLayer .layui-form-select dl{   
			max-height: 170px !important;
		}
	</style>
</head>
<body>
	<div class="volumeClassMan-con">
		<script type="text/html" id="toolbarDemo">
			<button type="button" class="layui-btn layui-bg-blue" id="addVoluemeClass" lay-event="addVoluemeClass" lay-filter="addVoluemeClass">新增卷类</button>
		</script>

		<table class="layui-hide" name="VoluemeClassList" id="VoluemeClassList" lay-filter="VoluemeClassList"></table>

		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>

		<div id="addVolClass-layer">
			<div class="addVolClassLayer">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<label class="layui-form-label">卷类名称:</label>
						<div class="layui-input-block">
							<input type="text" name="volName" id="volName" lay-verify="required" autocomplete="off" placeholder="请输入卷类名称" class="layui-input">
							<input type="text" name="volClassid" id="volClassid" lay-verify="required" class="layui-input" style="display:none;">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">所属维度:</label>
						<div class="layui-input-block">
						    <select name="selDimension" id="selDimension" lay-filter="selDimension" lay-verify="required">
						    	<option value='00'>请选择维度</option>
							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">题目数量:</label>
						<div class="layui-input-block">
							<input type="number" name="titNumber" id="titNumber" lay-verify="required" autocomplete="off" placeholder="请输入题目数量(只可以输入数字)" min="0" max="10" class="layui-input" oninput="value=value.replace(/[^\d]/g,'')">
						</div>
					</div>
					<div class="layui-form-item layui-form-text">
						<label class="layui-form-label">卷类描述:</label>
						<div class="layui-input-block">
							<textarea placeholder="请输入卷类描述" id="description" class="layui-textarea"></textarea>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<script src="../js/jquery-3.3.1.js" charset="utf-8"></script>
	<script src="../layui/layui.js" charset="utf-8"></script>
	<script>
		layui.use([ 'table', 'form', 'layer', 'laydate', 'laytpl', 'element' ], function() {
			var table = layui.table, 
				form = layui.form, 
				layer = layui.layer, 
				$ = layui.jquery,
				laydate = layui.laydate, 
				laytpl = layui.laytpl,
				element = layui.element;
		
			/*加载信息类型表格*/
			table.render({
				elem : '#VoluemeClassList',
				id: 'VoluemeClassid',
				url : '../scaletitletype/getscaletitletype',
				toolbar : '#toolbarDemo',
				title : '卷类信息数据表',
				height: "full-75",
				skin : 'line',
				even : true,
				cols : [ 
				     [ {
						type : 'numbers',
						title : '序号',
						align : 'center',
						width : 80
					}, {
						field : 'name',
						align : 'center',
						title : '卷类名称',
					}, {
						field : 'dimensionName',
						align : 'center',
						title : '所属维度',
					}, {
						field : 'titleNumber',
						align : 'center',
						title : '题目数量',
					}, {
						field : 'describe',
						align : 'center',
						title : '卷类描述'
					},{
						title : '操作',
						toolbar : '#barDemo',
						align : 'center'
					} ] 
				 ],
				 page: {
						layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
						groups: 5,
						limit: 10,
						limits: [10, 20, 30, 40, 50],
						theme: '#1E9FFF',						
				 },
			});
			
			/* 动态加载维度下拉框 */
			$.ajax({
				type : 'get',
				url : '../dimensionmanagement/getalldimensionlist',
				datatype : 'json',
				success : function(dimension) {
					if (dimension.code == 0) {
						var str = "";
						for(var i = 0; i < dimension.count; i++){
							str += '<option value=' + dimension.data[i].dimensionid + '>'+ dimension.data[i].dimensionName+'</option>';
						}
						$("#selDimension").append(str);
						form.render("select");
					}
				}
			});
		
			//添加信息类型管理
			table.on('toolbar(VoluemeClassList)', function(obj) {
				switch (obj.event) {
					case 'addVoluemeClass':
						/*清空表单*/
				        $('form')[0].reset();
						layer.open({
							type : 1,
							title : '卷类添加',
							area : [ '520px', '410px' ],
							shade : 0.4,
							content : $('#addVolClass-layer'),
							btn : [ '保存', '返回' ],
							yes : function() {
								var volName = $("#volName").val();
								var selDimension = $("#selDimension").val();
								var titNumber = $("#titNumber").val();
								var description = $("#description").val();
			
								if(volName == "") {
									layer.tips('不能为空', '#volName');
									return;
								} 	
								if(selDimension == "") {
									layer.tips('不能为空', '#selDimension');
									return;
								}
								if(titNumber == "") {
									layer.tips('不能为空', '#titNumber');
									return;
								}
								$.ajax({
									type : 'get',
									url : '../scaletitletype/addscaletitletype',
									datatype : 'json',
									data:{typename:volName,titlenumber:titNumber,
										dimensionid:selDimension,describe:description},
									success : function(data) {
										if (data.code == "10001") {
											layer.confirm(data.msg, {
											  btn: ['确定']
											}, function(){
												table.reload("VoluemeClassid", { //此处是上文提到的 初始化标识id
									                where: {
									                	keyword:data.code=='10001'
									                }
									            });
									            /*清空表单*/
				       							$('form')[0].reset();	
												layer.closeAll();
											});
										}else{
											layer.confirm(data.msg, {
											  btn: ['确定']
											});
											layer.setTop(layero);
										}
									},
									error : function() {
										layer.confirm('出现错误，添加失败，请重试！', {
											  btn: ['确定']
										});
									}
								});						
							},
							btn2 : function() {
								layer.closeAll();
							},
						});
					break;
				};
			});
		
			//表格工具栏事件 
			table.on('tool(VoluemeClassList)', function(obj) {
				var data = obj.data;
				switch (obj.event) {
					case 'edit':
						$("#volClassid").val(data.id);
						$("#volName").val(data.name);
						$("#selDimension").val(data.dimensionid);
						$("#titNumber").val(data.titleNumber);
						$("#description").val(data.describe);
						form.render("select");
						layer.open({
							type : 1,
							title : '卷类修改',
							area : [ '520px', '410px' ],
							shade : 0.4,
							content : $('#addVolClass-layer'),
							btn : [ '保存', '返回' ],
							yes : function() {
								var typeid = $("#volClassid").val();
								var volName = $("#volName").val();
								var selDimension = $("#selDimension").val();
								var titNumber = $("#titNumber").val();
								var description = $("#description").val();
			
								if(volName == "") {
									layer.tips('不能为空', '#volName');
									return;
								} 
								if(selDimension == "") {
									layer.tips('不能为空', '#selDimension');
									return;
								}
								if(titNumber == "") {
									layer.tips('不能为空', '#titNumber');
									return;
								}	
								$.ajax({
									type : 'get',
									url : '../scaletitletype/updatescaletitletype',
									datatype : 'json',
									data:{typeid:typeid,typename:volName,titlenumber:titNumber,
										dimensionid:selDimension,describe:description},
									success : function(data) {
										if (data.code == "10001") {
											layer.confirm(data.msg, {
											  btn: ['确定']
											}, function(){
												table.reload("VoluemeClassid", { //此处是上文提到的 初始化标识id
									                where: {
									                	keyword:data.code=='10001'
									                }
									            });	
									            /*清空表单*/
				        						$('form')[0].reset();
												layer.closeAll();
											});
										}else{
											layer.confirm(data.msg, {
											  btn: ['确定']
											});
											layer.setTop(layero);
										}
									},
									error : function() {
										layer.confirm('出现错误，修改失败，请重试！', {
											  btn: ['确定']
										});
									}
								});		
							},
							btn2 : function() {
								layer.closeAll();
							},
						});
					break;
					
					//删除按钮操作
					case 'del':
						//询问框
						layer.confirm('确定要删除么？', {
						  btn: ['确定','取消'] //按钮
						}, function(){
							$.ajax({
				        		type: 'get',
				        		url: "../scaletitletype/deletescaletitletype?typeid=" + data.id,
				        		dataType: 'json',
				        		success:function(data){
				        			if(data.code == 10001){
				        				layer.confirm(data.msg, {
										  btn: ['确定']
										}, function(){
											table.reload("VoluemeClassid", { //此处是上文提到的 初始化标识id
								                where: {
								                	keyword:data.code=='10001'
								                }
								            });	
											layer.closeAll();
										});          				 
				        			}
				        			else{
				        				layer.confirm(data.msg, {
											  btn: ['确定']
										});
				        			}
				        		},
				        		error:function(){
				        			layer.confirm('出现错误，删除失败，请重试！', {
										  btn: ['确定']
									});
				        		},
				        	});   
						}, function(){ 
							layer.closeAll();
						});
					break;
					
				}
				;
			});
		
		});
	</script>
</body>
</html>